<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>众创空间</title>
    <link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <link rel="stylesheet" href="__STATIC__/css/index.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <script src="__STATIC__/js/swiper.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KFVtqmFPhRXdZLRkcPbFsCQy83wlFpg9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap {height: 260px;width:100%;overflow: hidden;}
        #result {width:100%;font-size:12px;}
        dl,dt,dd,ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        dt{
            font-size:14px;
            font-family:"微软雅黑";
            font-weight:bold;
            border-bottom:1px dotted #000;
            padding:5px 0 5px 5px;
            margin:5px 0;
        }
        dd{
            padding:5px 0 0 5px;
        }
        li{
            line-height:28px;
        }
    </style>
    <!--<script src="js/index.js"></script>-->
</head>
<body>
<style>
    .swiper-container img{
        height: 8.53333333rem;
    }
</style>
<section class="wrap">
    <!--banner图开始-->
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {volist name="imgs" id="v"}
                <div class="swiper-slide "><a href="#"><img src="{$v.thumbFile}" alt=""></a></div>
                {/volist}
            </div>
            <div class="swiper-pagination" ></div>
            <!-- 导航按钮 -->
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
        </div>
        <script>
            var swiper = new Swiper('.banner .swiper-container', {
                pagination: '.swiper-pagination',
                paginationType : 'fraction',
                paginationFractionRender: function (swiper, currentClassName, totalClassName) {
                    return '<span class="' + currentClassName + '"></span>' +
                            '/' +
                            '<span class="' + totalClassName + '"></span>';
                },
                paginationClickable: true,
                centeredSlides: true,
                autoplay: 2500,
                loop: true,
                autoplayDisableOnInteraction: false,
                // 前进后退按钮
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
            });
        </script>
        <style>
            .swiper-container-horizontal  .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
                background:rgba(0, 0, 0, 0.7)!important;
                filter:Alpha(opacity=70); background:black; /*　使用IE专属滤镜实现IE背景透明*/
                 width: 1.6rem;
                left:90%;
                 bottom: 0;
                color: white;
                height: 0.8533333rem;
                width: 1.70666667rem;
                line-height: 0.8533333rem; ;
            }
            .swiper-container-horizontal  .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction span{
                color: white;
            }
            .swiper-button-next, .swiper-button-prev{
                background-size: 0.64rem 1.87733333rem;
            }
        </style>
    </div>
    <!--banner图结束-->
    <div class="content">
        <div class="bar_20"></div>
        <div class="content-info">
           <p>{$project.price}/月</p>
           <p>丰台首科大厦</p>
           <p>地址：{$project.areaName}</p>
           <p>面积：{$project.area}平方米</p>
        </div>
        <div class="bar_20"></div>
        <div class="content-info">
            <p>空间介绍</p>
            <p>{$project.brief}</p>
        </div>
        <div class="bar_20"></div>
        <div class="content-info">
            <p>服务设施</p>
            <p>基础服务：{$project.baseServiceName} </p>
            <p>基础设施：{$project.baseFacilityName}  </p>
        </div>
        <input type="hidden" value="{$project.areaN}" id="address" size="30"/>
        <input type="hidden" value="{$project.projectId}" id="projectId" size="30"/>
        <div class="bar_20"></div>
        <div class="content-info">
            <p>地理位置</p>
            <p class="location-img"><div id="allmap"></div></p>
        </div>
        <div class="bar_51"></div>
    </div>
    <div class="content-phone">
        <a href="tel://<?php echo getServiceTel();?>">电话咨询</a>
        <a href="confirm.html?projectId={$project.projectId}" style="border-top: 1px solid #049eff">立即购买</a>
    </div>
</section>

</body>
<script>
       // 百度地图API功能
    var map = new BMap.Map('allmap');
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示
    var address = document.getElementById("address").value;
    var projectId = document.getElementById("projectId").value;
    myGeo.getPoint(address, function(point){
        lng=point.lng;
        lat=point.lat;
        var poi = new BMap.Point(lng,lat);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();
        $.post("{:\\think\\Url::build('getCityDetail2')}",{projectId:projectId},function(msg){
            var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                '<div class="fl" style="width: 180px;"><div>地址：{$project.areaN}</div><div>电话：{$project.mobile}</div></div></div>';
            //创建检索信息窗口对象
            var searchInfoWindow = null;
            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title  : msg.projectName,      //标题
                width  : 90,             //宽度
                height : 40,              //高度
                panel  : "panel",         //检索结果面板
                enableAutoPan : true,     //自动平移
                searchTypes   :[
                    BMAPLIB_TAB_SEARCH,   //周边检索
                    BMAPLIB_TAB_TO_HERE,  //到这里去
                    BMAPLIB_TAB_FROM_HERE //从这里出发
                ]

            });
            var marker = new BMap.Marker(poi); //创建marker对象
            marker.enableDragging(); //marker可拖拽

                searchInfoWindow.open(marker);

            map.addOverlay(marker); //在地图中添加marker
        });

    }, "");
</script>
</html>